<div class="layui-fluid"  lay-title="首页菜单栏" id="app-vue">

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="custom-header">
                    <div class="custom-header-show nepadmin-pad0">
                        <div class="custom-header-left display-flex">
                            <div class="layui-form-item  layui-col-space10">
                                <div class="layui-inline nepadmin-mar-r30">
                                    <el-button size="small" type="primary"  @click="handleCreate({})">新增</el-button>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="custom-header-show nepadmin-pad0">
                        <div class="layui-inline nepadmin-mar-r30">
                            <el-button size="small" type="danger"  @click="handleTableCheckboxDelete('/admin/coupon/webMenuModel_dels')">批量删除</el-button>
                        </div>
                    </div>


                </div>
                <div class="layui-card-body nepadmin-pad-l10 nepadmin-pad-r10">

                    <el-table
                            v-loading="table_loading"
                            :data="tableData"
                            border
                            row-key="id"
                            height="calc(100vh - 240px)"
                            :tree-props="{children: 'child_list', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column label="ID" prop="id" width="50"></el-table-column>
                        <el-table-column prop="img" label="图片" width="80">
                            <template slot-scope="scope">
                                <el-image style="width: 35px; height: 35px" :src="scope.row.img" fit="fit"  :preview-src-list="[scope.row.img]"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="分类名" width="300">
                            <template slot-scope="scope">
                                <my-el-table-column :row="scope.row" prop="name" url='/admin/system/webMenuModel_modInfo'/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="url" label="url" min-width="180">
                            <template slot-scope="scope">
                                <my-el-table-column :row="scope.row" prop="url" url='/admin/system/webMenuModel_modInfo'/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序" width="120">
                            <template slot-scope="scope">
                                <my-el-table-column input-type="number" :row="scope.row" prop="sort" url='/admin/system/webMenuModel_modInfo'/>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status_name" align="center" width="100">
                            <template slot-scope="scope">
                                <my-switch-status
                                        url='/admin/system/webMenuModel_modInfo'
                                        :item="scope.row"
                                />
                            </template>
                        </el-table-column>

                        <el-table-column fixed="right" width="200" label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                                <my-btn-del
                                        url='/admin/system/webMenuModel_del'
                                        :id="scope.row.id"
                                        :fnc="()=>tableData.splice(scope.$index,1)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>


    <create-menu ref="createMenu" />
</div>

<script>
    layui.extend({
        createMenu: 'views/web/components/createMenu',
    }).use(['admin','conf','jquery','view','createMenu','mixinsTableCheckbox',"myElTableColumn"], function (admin,conf,$,view,createMenu,mixinsTableCheckbox,myElTableColumn) {
        var window_components_add = "create-menu-components-load";

        (function(){

        })()

        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                tableData: [],
                tag_lists: [],
                message: 'page2',
            },
            mixins:[mixinsTableCheckbox],
            components:{
                'create-menu' : createMenu,
            },
            created:function() {
                // this.getBaseInfo()
                this._initData()
            },
            methods: {
                // getBaseInfo:function(){
                //     const that = this
                //     admin.post({
                //         url:'/admin/index/defInfo',
                //         data:{type:'platform_tags'},
                //         success:function(res){
                //             const data = res.data||{}
                //             that.tag_lists = data.tag_lists||[]
                //         }
                //     })
                // },
                _initData:function(){
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/web/menu'
                        ,success: function (res) {
                            that.table_loading = false

                            var data = res.data || {}
                            that.tableData = data.list || []
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },
                handleCreate:function(item) {
                    this.$refs['createMenu'].showDialog(item,this)
                },
                handleDelete:function(item,index){
                    const that = this
                    this.$confirm('确定删除选中的数据', '提示', { type: 'error' }).then(function(v){
                        admin.post({
                            url:'/admin/web/menuDel'
                            ,data:{id:item.id }
                            ,success: function (res) {
                                that._initData(true)
                            }
                        })
                    }).catch(function() {
                        console.log('cancel')
                    })
                },
                handleSwitchChange:function(item){
                    admin.post({
                        url:'/admin/web/menuModInfo'
                        ,data:{id:item.id,status:item.status_bool?1:2}
                        ,success: function (res) {

                        }
                    })
                }

            }
        })

    })
</script>